<template>
  <div>
    <nav-top/>

    <div class="container">
      <div class="new-invite" @click="showInviteCodeDialog = true">新增一个</div>
      <template v-for="(item, index) in list">
        <div class="invite-code-item" :key="index">
          <span>
            <span class="invite-code">{{item.inviteCode}}</span>
            <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              @confirm="disableInviteCode(item)"
              title="确定失效该邀请码吗？">
              <i slot="reference" class="el-icon-switch-button invite-code-close" v-if="item.dataStatus == 1 && item.inviteNumLeft > 0"></i>
            </el-popconfirm>
          </span>

          <div class="invite-tip">
            <span>可邀 ·</span>
            <span>{{item.inviteNumLeft}}</span>
            <span>|</span>
            <span>总数 ·</span>
            <span>{{item.inviteNum}}</span>
            <!-- <span>|</span>
            <span>{{item.createTime}}</span> -->
            <span class="i-enabled" v-if="item.dataStatus == 1 && item.inviteNumLeft > 0">有效</span>
            <span class="i-disabled" v-if="item.dataStatus == 0 || item.inviteNumLeft == 0">失效</span>
          </div>

          <div class="right-btn">
            <div class="invite-btn" @click="getTip(item.inviteCode)">邀请</div>
          </div>
        </div>
      </template>

      <el-dialog
        title="设置可邀请人数"
        :visible="showInviteCodeDialog"
        :append-to-body="true"
        width="30%"
        top="20%"
        center>
        <div class="edit-menu-dialog-box">
          <div class="el-input-box">
            <el-input size="medium" v-model="num" placeholder="请输入人数"/>
          </div>
        </div>
        <span slot="footer" class="add-menu-dialog-footer">
          <el-button type="primary" size="medium" @click="newInviteCode">新增</el-button>
        </span>
      </el-dialog>
    </div>    
  </div>
</template>

<script>
import Api from "@/utils/api.js";
import CopyUtil from "@/utils/copyUtil.js"
import NavTop from "@/components/NavTop.vue"

export default {

  head () {
    return {
      title: `邀请码管理`,
      meta:[
        // 阻止搜索引擎编入索引
        { name:'robots',content: 'noindex'}
      ]
    }
  },  

  components:{
    NavTop
  },

  data(){
    return{
      num: 100,
      showInviteCodeDialog: false,
      list: ''
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.getList();
    })
  },

  methods:{
    getList(){      
      this.$axios.post(Api.INVITE_LIST).then( res =>{
        this.list = res
      }).catch(res =>{
        // 提示失败
        this.$message.warning(res.message);
      })
    },

    newInviteCode(){
      this.showInviteCodeDialog = false;
      const loading = this.$loading({
        lock: true,
        text: '新增中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$axios.post(Api.INVITE_NEW, { num : this.num }).then( res =>{
        loading.close();
        this.getList();
      }).catch(res =>{
        loading.close();
        // 提示失败
        this.$message.warning(res.message);
      })
    },

    getTip(inviteCode){      
      this.$axios.post(Api.INVITE_TIP, {inviteCode: inviteCode}).then( res =>{
	      CopyUtil.copyContent(res)
				this.$message.success("已复制到剪切板，快去分享给朋友吧!") 
      }).catch(res =>{
        // 提示失败
        this.$message.warning(res.message);
      })
    },

    disableInviteCode(item){      
      this.$axios.post(Api.INVITE_DISABLE, {inviteCode: item.inviteCode}).then( res =>{
        item.dataStatus = 0
      }).catch(res =>{
        // 提示失败
        this.$message.warning(res.message);
      })
    },
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>

<style>
.el-popconfirm__action{
  margin-top: 20px !important;
}
</style>